<template>
<div>
  <h2>CSS3Practice</h2>
  <fieldset>
    <legend>css3变形</legend>
    <div style="text-align: center; float: left;">
      <div class="changeElement"><i class="el-icon-platform-eleme"></i>旋转放大</div>
    </div>
    <div style="float: left;">
      <div class="changeElement10deg" style="transform-origin: bottom; position: absolute; z-index: 3"> 10<div>❤</div></div>
      <div class="changeElement10deg" style="transform: rotate(8deg); transform-origin: bottom; position: absolute; z-index: 4"> J<div>❤</div></div>
      <div class="changeElement10deg" style="transform: rotate(16deg); transform-origin: bottom; position: absolute; z-index: 5"> Q<div>❤</div></div>
      <div class="changeElement10deg" style="transform: rotate(24deg); transform-origin: bottom; position: absolute; z-index: 6"> K<div>❤</div></div>
      <div class="changeElement10deg" style="transform: rotate(32deg); transform-origin: bottom; position: absolute; z-index: 6"> A<div>❤</div></div>
    </div>
  </fieldset>
</div>
</template>

<script>
export default {
  name: 'Css3Practice'
}
</script>
<style>
/* css3变形样式开始 */
  .changeElement{
    background-color: #aaa;
    width:200px;
    height: 200px;
  }
  .changeElement{
    transform: all 0.8s ease-in-out;
  }
  .changeElement:hover{
    transform: rotate(180deg) scale(1.5);
  }
  i:hover{
    transform: rotate(180deg) scale(1.5);
  }
  .changeElement10deg{
    background-color: #fff;
    width:100px;
    height: 200px;
  }
  .changeElement10deg{
    color: red;
    text-align: left;
    border-radius: 3px;
    padding: .5em;
    border: 1px solid #000;
    /* transform-origin: bottom; */
  }
  /* css3变形样式结束 */
</style>